import {Button, Divider, Input} from "antd";
import React, { useState } from 'react';
import {Link} from "react-router-dom";
import Comments from "../comments/Commetns";
// 灵感卡片的组件
const CardList = (props) => (
        props.cards.map((item) => {
                let temp = item['fields'];
                // console.log(temp.created_time);
                let time = temp.created_time.match(/(\d+-\d+-\d+)\w(\d+:\d+:\d+)/);
                // console.log(patt);
                return (
                    <>
                        <from className="card" key={temp.id}>
                            <div className="card-body">
                                <div className="card-title-province">
                                    <h2>{temp.title}</h2>
                                </div>
                                <Divider dashed/>
                                <div className="card-content">
                                    <Link to={`/home/${temp.card_id}`}>{temp.content}</Link>
                                    <Divider dashed/>
                                    发布者:<span>{temp.user}</span>
                                    <Divider dashed/>
                                </div>
                                <div class="card-footer">
                                    <button onClick={() => props.handleLikes(temp.card_id)} class="card-like">{
                                        (() => {
                                            for (let i in props.userLikes) {   // for in 循环是循环下标！
                                                let right = props.userLikes[i]['fields'];
                                                if (right.card_id === temp.card_id && right.state === true) {
                                                    return "取消点赞";
                                                }
                                            }
                                            return "点赞";
                                        })() // 利用立即执行函数来返回结果
                                    }{temp.likes}</button>

                                    <button onClick={ () => props.handleCollections(temp.card_id)}
                                            className="card-like">{
                                        (() => {
                                            for(let i in props.userCollections){
                                                let right = props.userCollections[i]['fields'];
                                                // console.log("right:", right);
                                                if(right.card_id === temp.card_id && right.user === props.localUser)
                                                    return "取消收藏";
                                            }
                                            return "收藏";
                                        })()
                                    }{temp.collections}</button>
                                    <button onClick={() => props.handleAddComments(temp.card_id)} className="card-like">评论{temp.comments}</button>
                                    <Divider dashed />
                                    <from className="card-comment-class" style={{display: "none"}} id={`card-comment-${temp.card_id}`}>
                                        <Input.TextArea placeholder="评论" id={`input-comment-${temp.card_id}`} allowClear={true}/>
                                        <Button onClick={() => props.onPublishComment(temp.card_id)}>发布</Button>
                                    </from>
                                    <Divider dashed/>
                                    发布时间:<span>{time[1] + time[2]}</span>
                                </div>
                                <Divider dashed/>
                            </div>

                        </from>
                        <Divider dashed/>
                    </>
                )
            })
)


export default CardList;